<template>
  <div class="container2">
    <!-- 供应商其他地址dialog-->
    <el-dialog
      :title="title"
      width="800px"
      class="tableDialog"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="viewVisible"
    >
      <section class="title">
        <p>{{ addressForm.names }}</p>
        <p><el-button
          size="mini"
          class="add-btn"
          type="primary"
          @click="init('add',addressForm)">新增</el-button>
        </p>
      </section>
      <el-table
        size="mini"
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        border
        :header-cell-style="{
          'background-color': '#eeeeee !important',
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="" label="收货地址" min-width="250">
          <template slot-scope="scope">
            <section>
              {{ scope.row.addressNames }}
              {{ scope.row.detailAddress }}

              <span v-if="scope.row.isDefault === '1'" class="default"
                >默认</span
              >
              <span v-else style="color: #999999;margin-left: 20px;">默认</span>
            </section>
          </template>
        </el-table-column>
        <el-table-column p label="操作"  width="112px">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="init('edit', scope.row)"
              >修改</el-link
            >
            <el-link type="primary" :underline="false" @click="del(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        layout="total,sizes,prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-dialog>
    <div class="editForm-wrapper">
    <el-dialog
      class="addressDialog"
      :title="editTitle"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="95px"
        :rules="dataRule"
        ref="editForm"
        :model="editForm"
      >
        <el-form-item label="收货人:" prop="contactName">
          <el-input maxlength="30" show-word-limit v-model.trim="editForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="contactPhone">
          <el-input maxlength="11" show-word-limit v-model.trim="editForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="所在地区:" prop="countyCode">
          <Area class="areaselect-adjust" ref="area" @getArea="getArea1"></Area>
        </el-form-item>
        <el-form-item label="详细地址:" prop="detailAddress">
          <el-input maxlength="50" show-word-limit v-model.trim="editForm.detailAddress"></el-input>
        </el-form-item>
          <div class="content-more">
              <el-form-item label="经度纬度:" prop="lng">
                  <el-input maxlength="20" show-word-limit v-model.trim="editForm.lng" placeholder="请输入经度"></el-input>
              </el-form-item>
              <el-form-item prop="lat">
                  <el-input maxlength="20" show-word-limit v-model.trim="editForm.lat" placeholder="请输入纬度"></el-input>
                  <span>
<!--                        <el-link icon="el-icon-search" @click="openBMap" type="danger" :underline="false">地图标点</el-link>-->
                    </span>
              </el-form-item>
          </div>
          <el-form-item class="map-mark">
              <el-link icon="el-icon-search" @click="openBMap" type="danger" :underline="false">地图标点</el-link>
          </el-form-item>
        <el-form-item label="默认地址:" prop="isDefault">
          <el-switch
            v-model="editForm.isDefault"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="close('edit')">取消</el-button>
      </span>
    </el-dialog>
  </div>
      <el-dialog
          class="mapDialog tableDialog"
          title="搜索地点"
          width="980px"
          :close-on-click-modal="false"
          v-dialogDrag
          :visible.sync="mapVisible"
      >
          <BMap ref="BMap"
                v-on:getlngAndlat="getlngAndlat"></BMap>

      </el-dialog>
  </div>
</template>
<script>
import { editCompanyArea, getCompanyArea, deleteAddress } from '@/api/market/crm.js'
import Area from '@/components/area/area'
import BMap from '@/components/BMap/BMap'
export default {
  components: {
    Area,
    BMap
  },
  data () {
    // v-if="hasPermission('database:datamodel:dataSet:add')"
    return {
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      method: '',
      title: '',
      editTitle: '',
      loading: false,
      mapVisible: false,
      areaLabel: {},
      tableData: [],
      addressForm: {
        names: '',
        companyId: ''
      },
      editForm: {
        countyCode: '',
        detailAddress: '',
        isDefault: '',
        contactName: '',
        companyId: '',
        contactPhone: '',
        id: '',
        lng: '',
        lat: ''
      },
      editVisible: false,
      viewVisible: false,
      dataRule: {
        isDefault: [{ required: false, message: '请选择', trigger: 'change' }],
        countyCode: [
          { required: true, message: '请输入公司所在地区', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          {validator:this.checkPhoneNumber, trigger:'blur'}
        ],
        contactName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          { max: 10, message: '最大长度是10个字符', trigger: 'blur' }
        ],
        detailAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { max: 50, message: '最大长度是50个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList(this.page, this.addressForm.companyId)
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList(this.page, this.addressForm.companyId)
    },
  	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
    // 校验手机号
    checkPhoneNumber (rule, value, callback) {
      if (value && (!(/^[1][34578]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
        callback(new Error('手机号码不符合规范'))
      } else {
        callback()
      }
    },
    init (method, addressForm) {
      if (method === 'view') {
        this.viewVisible = true
        let addressFormBuffer = {
          names: addressForm.names,
          companyId: addressForm.id
        }
        this.addressForm = addressFormBuffer
        this.editForm.companyId = addressFormBuffer.companyId
        this.getList(this.page,this.addressForm.companyId)
        this.addressForm.id = ''
        this.addressForm.addressId = ''
        this.title = '查看收货地址'
      } else if (method === 'add') {
        this.editForm.id = ''
        this.editTitle = '新增收货地址'
        this.editVisible = true
        let that = this
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
          this.editForm = {}
          this.editForm.companyId = addressForm.companyId
          console.log('新增收货地址')
          console.log(this.editForm.companyId)
          that.$refs.area.province = ''
          that.$refs.area.city = ''
          that.$refs.area.district = ''
        })
      } else if (method === 'edit') {
        this.editVisible = true
        this.editForm.id = addressForm.id
        this.editForm.countyCode = addressForm.countyCode
        this.editForm.contactPhone = addressForm.contactPhone
        this.editForm.companyId = addressForm.companyId
        this.editForm.contactName = addressForm.contactName
        this.editForm.isDefault = addressForm.isDefault
        this.editForm.detailAddress = addressForm.detailAddress
        let area = JSON.parse(this.editForm.countyCode)
        let that = this
        this.$nextTick(() => {
          that.$refs.area.province = area.province
          that.$refs.area.city = area.city
          that.$refs.area.district = area.district
        })
        this.editTitle = '修改收货地址'
      }
    },
    // 删除供应商
    del (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteAddress({id: id}).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList(this.page,this.addressForm.companyId)

            this.$emit('refreshDataList')
          }
        })
      })
    },
    // del (id) {
    //   deleteAddress({id: id}).then(res => {
    //     if (res.data.code === '200') {
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       })
    //       this.getList(this.addressForm.companyId)
    //
    //       this.$emit('refreshDataList')
    //     }
    //   })
    // },
    // this.addressForm.companyId
    getList (params,companyId) {
      this.loading = true
      getCompanyArea({
        companyId: companyId,
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        orderBy: 'is_default',
        orderByAORC: 'desc'
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.result.list
          this.page.total = res.data.result.count
          console.log(this.tableData)
        }
        this.loading = false
        console.log(res.data)
      })
    },

    getArea1 (e) {
      if (e.province !== '' && e.city !== '' && e.district !== '') {
        this.editForm.countyCode = JSON.stringify(e)
      } else {
        this.editForm.countyCode = ''
      }
    },
    close (type) {
      if (type === 'edit') {
        this.editVisible = false
        return
      }
      this.viewVisible = false
    },
    doSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (
            this.editForm.countyCode !== '' &&
            typeof this.editForm.countyCode !== 'undefined'
          ) {
            console.log(this.editForm.countyCode)

            editCompanyArea(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
                this.getList(this.page,this.addressForm.companyId)
              }
            })
          }
        }
      })
    },
      // 打开地图弹窗
      openBMap() {
          this.mapVisible = true;
      },
      // 经纬度数据回显
      getlngAndlat(val) {
          this.mapVisible = false;
          this.editForm.lat = val.lat.toString();
          this.editForm.lng = val.lng.toString();
      },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    mounted () {
      this.getList(this.page,this.editForm.companyId)
    }
  }
}
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
    .editForm-wrapper ::v-deep.el-dialog__wrapper .el-dialog .el-dialog__body{
        .el-form{
            .el-radio__label{
                font-size: 16px;
            }
            .content-more{
                display: flex;
                .el-form-item{
                    margin-bottom: 0 !important;
                    .el-input__inner{
                        min-width: 155px !important;
                        width: 155px;
                    }
                }
                .el-form-item:last-child{
                    margin-left: 10px;
                    .el-form-item__content{
                        margin-left: 0 !important;
                        .el-link{
                            margin-left: 5px;
                        }
                    }
                }
            }
            .map-mark{
                margin-bottom: 5px !important;
            }
        }
    }
.title {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}
::v-deep .el-dialog > .el-dialog__body {
    .default{
        color: $--color-primary-liyu;
        margin-left: 20px;
    }
  /*padding: 15px 20px !important;*/
  /*padding-bottom: 15px;*/
  /*padding-bottom: 10px !important;*/
  /*font-size: 16px !important;*/
  /*overflow: auto;*/
  /*color: #333333 !important;*/
  p{
    margin: 0;
  }
  .title{
    display: flex;
    p:first-child{
      flex: 1;
      line-height: 30px;
    }
  }
}

</style>
